<template>
<!--    发表评论-->
    <div  v-bind:class="disShow ? 'noneshow': ''">
        <el-row :gutter="24">
            <el-col :span="1"><el-avatar :src="this.$store.getters['user/getUserHeader']" style="margin-top: 15px"></el-avatar></el-col>
            <el-col :span="23">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 3}"
                        :maxlength="maxlength"
                        placeholder="既然来了，那就留下些什么吧^0^"
                        v-model="content" @input="calcContentNum"
                        style="font-size: 20px">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px">
            <el-col :span="4" :offset="12" style="padding-top: 10px;font-size: 15px">还能输入{{contentNum}}字符</el-col>
            <el-col :span="2" >
                <div class="emoji">
                    <Emoji  v-on:changeContent="changeContent"></Emoji>
                </div>
            </el-col>
            <el-col :span="2" >
                <el-button type="primary" class="topicbtn" @click="topicContent">发送评论</el-button>
            </el-col>
            <el-col :span="2" style="margin-left: 50px">
                <el-button type="info" class="topicbtn" @click="cancelTopic">取消评论</el-button>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import Emoji from "../Emoji";
    export default {
        name: "WriteTopic",
        components:{
            Emoji
        },
        props:{
          show:{
              type:Boolean,
              default:true
          },
            //这个是用于点击取消评论，是否将该组件隐藏
            cancelDis:{
                type:Boolean,
                default:true
            },
            //评论的信息，也就是回复的对象
            topicInfo:{
              type:Object
            }
        },
        created() {
            this.disShow = this.show;
        },
        data(){
          return{
              disShow:true,
              valueInput: "Someting text ",
              content:"",
              contentNum:1024,
              maxlength:1024
          }
        },
        methods:{
            changeContent(param){
                this.content = this.content + param;
            },
            calcContentNum(){
                this.contentNum = this.maxlength - this.content.length;
            },
            topicContent(){
                //判断账号是否登录
                if ("" === this.content.trim()){

                    this.$myMessage.error("内容不能为空!");
                    return;
                }
                let token = localStorage.getItem("token");
                if (token === null){

                    this.$myMessage.error("请先登录");
                    //延迟一秒执行
                    setTimeout(() => {
                        this.$store.state.user.dialogVisible = true;
                    }, 1000);
                    return;
                }
                this.$axios.post("/api/loginuser").then(res=>{
                    if (res.status === 200) {
                        this.isLogin = true;
                        let userData = this.$store.getters["user/getUsers"];
                        userData['otherData'] = this.content;
                        if (!this.topicInfo){
                            userData['parentId'] = 0;
                            userData['blogId'] = 0;
                        }else {
                           userData['parentId'] = this.topicInfo.id;
                            userData['blogId'] = this.topicInfo.blogId;
                        }
                        this.$axios.post("/api/comment",userData).then(res=>{
                            if (res.status === 200){
                                this.$myMessage.success("评论成功！");
                                this.content = "";
                                this.contentNum = this.maxlength;
                                //更新数据
                                if (res.data.parentId !== 0){
                                    this.disShow = !this.disShow;
                                }
                                this.$emit("updateData",res.data);
                            }
                        }).catch(reason => {});
                    }
                }).catch(re=>{});
            },cancelTopic(){
                this.content = "";
                this.contentNum = this.maxlength;
                if (this.cancelDis){
                    this.disShow = !this.disShow;
                }
            },
            changeDis(){
                this.disShow = !this.disShow;
            }
        }
    }
</script>

<style scoped>
    .topicbtn{
        padding: 14px;
        width: 100px;
    }
    .noneshow{
        display: none;
    }
</style>